import { ProTableProps } from '@ant-design/pro-components';
import { Table, Tag } from 'antd';
import { expandDirection } from 'windicss/utils';
import { MenuType } from '@/types/menu';
import { menuOption, menuTagColor } from '@/enums/menuType';
import { WitIcon } from '@/components/Icon';
import { columns } from '@/views/Template/templateColumns';

export const menuTableConfig: ProTableProps<MenuType, any> = {
  rowKey: 'id',
  // headerTitle='高级表格'
  search: {
    labelWidth: 'auto',
  },
  scroll: { x: 1600 },
  options: {
    setting: {
      listsHeight: 400,
    },
    fullScreen: true,
  },
  expandable: {
    expandIconColumnIndex: 1,
    defaultExpandAllRows: true,
  },
  columnsState: {
    // 持久化储存
    persistenceKey: 'menuManager',
    persistenceType: 'localStorage',
  },
  cardBordered: true,
  dateFormatter: 'string',
  pagination: {
    defaultPageSize: 10,
    showSizeChanger: true,
  },
  columns: [
    {
      title: '编号',
      dataIndex: 'index',
      valueType: 'indexBorder',
      fixed: 'left',
      width: 48,
    },
    {
      title: '菜单名',
      dataIndex: 'name',
      copyable: true,
      ellipsis: true,
      // tip: '登录账号',
      valueType: 'treeSelect',
      editable: false,
      filters: true,
      disable: true,
      fixed: 'left',
      formItemProps: {
        rules: [
          {
            required: false,
            message: '此项为必填项',
          },
        ],
      },
    },
    {
      disable: true,
      title: '路由',
      dataIndex: 'path',
      filters: true,
      align: 'center',
    },
    {
      disable: true,
      title: '组件名',
      dataIndex: 'component',
      filters: true,
      align: 'center',
    },
    {
      disable: true,
      title: '菜单类型',
      dataIndex: 'mode',
      search: false,
      align: 'center',
      // @ts-ignore
      render: dom => <Tag color={menuTagColor[dom]}>{menuOption[dom]}</Tag>,
    },
    {
      disable: true,
      title: '排序',
      dataIndex: 'sort',
      search: false,
      align: 'center',
    },
    {
      disable: true,
      title: '图标',
      dataIndex: 'icon',
      search: false,
      align: 'center',
      // @ts-ignore
      render: dom => <WitIcon type={dom} />,
    },
    {
      disable: true,
      title: '禁用',
      dataIndex: 'disabled',
      search: false,
      align: 'center',
    },
    {
      disable: true,
      title: '是否显示',
      dataIndex: 'hideTab',
      search: false,
      align: 'center',
    },
    {
      disable: true,
      title: '是否固定',
      dataIndex: 'affix',
      search: false,
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'memo',
      search: false,
      ellipsis: true,
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      editable: false,
      search: false,
      align: 'center',
    },
    {
      title: '修改时间',
      dataIndex: 'updatedTime',
      valueType: 'dateTime',
      editable: false,
      search: false,
      align: 'center',
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      disable: true,
      fixed: 'right',
      width: 210,
    },
  ],
};
